<template>
  <div class="myContainer" v-loading="laoding">
    <el-row class="myHeadeTitle">
      <el-col :span="10">
        员工基本信息
      </el-col>
    </el-row>
    <el-form :model="detail" :rules="rules" ref="ruleForm">
      <el-row class="mymarginTop_10px" v-if="type!='add'">
        <el-col :span="3" class="myLeftMsg">
          员工头像 :
        </el-col>
        <el-col :span="6">
          <img class="myImg" src="static/images/timg.jpg" v-if="detail.avatar=='' || detail.avatar==null" alt="">
          <img class="myImg" :src="detail.avatar" v-else alt="">
        </el-col>
      </el-row>
      <el-row class="mymarginTop_10px" v-if="type!='add'">
        <el-col :span="3" class="myLeftMsg">
          员工昵称 :
        </el-col>
        <el-col :span="6">
          <el-input v-model="detail.nickname" placeholder="请填写员工昵称" :readonly="is_modifly"></el-input>
        </el-col>
      </el-row>
      <el-row class="mymarginTop_10px">
        <el-col :span="3" class="myLeftMsg">
          <span class="require myVA_M">*</span>
          员工姓名 :
        </el-col>
        <el-col :span="6">
          <el-form-item prop="user_name">
            <el-input v-model="detail.user_name" placeholder="请填写员工姓名" :readonly="is_modifly"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="mymarginTop_10px">
        <el-col :span="3" class="myLeftMsg">
          员工性别 :
        </el-col>
        <el-col :span="6" class="myLineHeight_45px">
          <template>
            <el-radio-group v-model="detail.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </template>
        </el-col>
      </el-row>
      <el-row class="mymarginTop_10px">
        <el-col :span="3" class="myLeftMsg">
          <span class="require myVA_M">*</span>
          身份证号码 :
        </el-col>
        <el-col :span="6">
          <el-form-item prop="card_no">
            <el-input v-model="detail.card_no" placeholder="请填写员工身份证号码" :readonly="is_modifly"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="mymarginTop_10px">
        <el-col :span="3" class="myLeftMsg">
          员工生日 :
        </el-col>
        <el-col :span="6">
          <el-date-picker
            :readonly="is_modifly"
            v-model="detail.birthday"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-col>
      </el-row>
      <el-row class="mymarginTop_10px">
        <el-col :span="3" class="myLeftMsg">
          民族 :
        </el-col>
        <el-col :span="6">
          <el-input v-model="detail.nation" placeholder="请填写民族信息" :readonly="is_modifly"></el-input>
        </el-col>
      </el-row>
      <el-row class="mymarginTop_10px">
        <el-col :span="3" class="myLeftMsg">
          户口所在地 :
        </el-col>
        <el-col :span="6">
          <el-input v-model="detail.household_address" placeholder="请填写户口所在地" :readonly="is_modifly"></el-input>
        </el-col>
      </el-row>  
      <el-row class="myHeadeTitle mymarginTop_10px">
        <el-col :span="10">
          员工联系方式及地址信息
        </el-col>
      </el-row>     
      <el-row class="mymarginTop_10px">
        <el-col :span="3" class="myLeftMsg">
          <span class="require myVA_M">*</span>
          联系电话 :
        </el-col>
        <el-col :span="6">
          <el-form-item prop="phone">
            <el-input v-model="detail.phone"  placeholder="请填写联系电话" :readonly="is_modifly"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="mymarginTop_10px">
        <el-col :span="3" class="myLeftMsg">
          联系地址 :
        </el-col>
        <el-col :span="10">
          <el-input v-model="detail.address" placeholder="请填写联系地址" :readonly="is_modifly"></el-input>
        </el-col>
      </el-row>
      <el-row class="myHeadeTitle mymarginTop_10px">
        <el-col :span="10">
          员工部门及职务信息
        </el-col>
      </el-row>   
      <el-row class="mymarginTop_10px">
        <el-col :span="3" class="myLeftMsg">
          <span class="require myVA_M">*</span>
          隶属部门 :
        </el-col>
        <el-col :span="6">
          <!-- <el-form-item prop="deptName">
            <el-input v-model="detail.dept_info.name" placeholder="请填写隶属部门" @focus="handleDeptClick" :disabled="is_modifly"></el-input>
          </el-form-item> -->
          <el-form-item prop="dept_info_name">
            <el-input v-model="detail.dept_info_name" placeholder="请填写隶属部门" @focus="handleDeptClick" :disabled="is_modifly || isOp"></el-input>
          </el-form-item>
        </el-col>
      </el-row>    
      <el-row class="mymarginTop_10px">
        <el-col :span="3" class="myLeftMsg">
          <span class="require myVA_M">*</span>
          员工职务 :
        </el-col>
        <el-col :span="6">
          <el-form-item prop="roleSelected">
            <template>
              <el-select
                v-model="detail.roleSelected"
                placeholder="员工职务"
                :disabled="is_modifly || isOp"
                @visible-change="clickRoleSelect"
                >
                <el-option
                  v-for="item in roleList"
                  :key="item.role_id"
                  :label="item.role_name"
                  :value="item.role_id">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-col>
      </el-row> 
      <el-row class="mymarginTop_10px">
        <el-col :span="10" :offset="3">
          <el-button v-if="type=='add'" @click="handleSaveClick('ruleForm')" class="myBgGreen">新 增</el-button>
          <el-button v-if="type=='update' && isShow(130)" @click="handleSaveClick('ruleForm')" class="myBgGreen">保 存</el-button>
          <el-button @click="onBack" class="myBgGreen">返 回</el-button>
        </el-col>
      </el-row>
    </el-form>



    <!--选择部门弹出框 start-->
    <el-dialog title="选择部门" class="myRoleDialog" :visible.sync="deptDialogVisible">
      <el-menu class="myOV_y_400px zcgl"
            v-loading="deptLoading"
            :default-active="deptSelected"
            @open="handleDeptSelect"
            @close="handleDeptSelect"
            @select="handleDeptSelect"
      >
          <dept-sub-menu :subMenu='deptList'></dept-sub-menu>
       </el-menu>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="deptDialogVisible = false">取 消</el-button>
        <el-button type="primary" class="myBgGreen" @click="handleDeptDlgClick" >提 交</el-button>
      </div>
    </el-dialog>
    <!--选择部门 end-->    
  </div>
</template>

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top: 2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myLineHeight_45px{
    line-height: 45px;    
  }
  .mymarginTop_10px{
    margin-top: 10px;
  }
  .myDialogSearchText{
    width: 360px;
  }
  .myContainerLeft_300px{
    width: 300px;
  }
  .myHeadeTitle{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dbdbdb;
    margin-bottom:10px; 
  }
  .myHeadeTitle:before,.myHeadeTitle:after{
    content: " ";
    display: block;
    clear: both;
  }
  .myImg{
    width: 120px;
    height: 120px;
    border-radius: 50% !important;
  }
  .myOV_y_400px{
    height: 400px;
    overflow-y: scroll;
    border:1px solid #f2f2f2;
  }
</style>

<script>

  import DeptSubMenu from '@/components/DeptSubMenu';
  import { getStaffDetail, createStaff, modifyStaff  } from '@/api/staff';
  import { getDeptRoleInfo, getDeptInfo } from '@/api/dept';
  import { r_email , r_phone } from "@/api/regular";//正则
  export default {
    data(){
      return{
        detail: {},
        rules: {
          user_name: [
            { required: true, message: '请输入用户姓名', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
          ],
          card_no:[
            {required: true, message: '请输入身份证号码', trigger: 'blur'},
            {pattern: r_email , message: '请输入正确的身份证号码', trigger: 'blur'}
          ],
          phone:[
            {required: true, message: '请输入联系电话', trigger: 'blur'},
            {pattern: r_phone , message: '请输入正确手机号码', trigger: 'blur'}
          ],
          residentTypeSelected:[
            {required: true, message: '请选择用户类型', trigger: 'change'}
          ],
          dept_info_name:[
            {required: true, message: '请选择隶属部门', trigger: 'blur'}
          ],
          roleSelected:[
            {required: true, message: '请选择员工职务', trigger: 'change'}
          ]
        },
        laoding: false,
        deptRoleLoading: false,

        roleSelected: null,
        roleList: [],

        deptDialogVisible:false,
        deptLoading: false,
        deptSelected: null,
        deptList:[],
        is_modifly:false,
        op:"",
        isOp:false
      }
    },
     components: {
        DeptSubMenu
    },
    created(){
      this.detail.dept_info = {};
      this.detail.dept_info.id = '';
      this.detail.dept_info.name = '';
      //this.detail.dept_info_name = '';//--------------
      // console.log(this.detail)
      this.type = this.$route.query.type;
      this.id = this.$route.query.id; 
      this.op = this.$route.query.op; 

      if (this.type == 'update' || this.type == 'info') {
        this.fetchDetail();
        this.is_modifly = false;
      }
      if(this.type == 'info'){
        this.is_modifly = true;
      }
      if(this.type=='add'){//新增
        this.is_modifly = false;
      }
      if(this.op=="home"){
        this.isOp=true;
      }
    },
    methods:{
     fetchDetail() {
        let vm = this;
        this.loading = true;
        getStaffDetail(vm.id)
        .then(response => {
          vm.detail = response.data;

          vm.deptSelected = vm.detail.dept_info.id + '';
          vm.detail.dept_info_name=vm.detail.dept_info.name;//------

          vm.roleList = new Array(1);
          vm.roleList[0] = {};
          vm.roleList[0].role_id = vm.detail.role_info.id;
          vm.roleList[0].role_name = vm.detail.role_info.name;
          vm.roleSelected = vm.detail.role_info.id;
          vm.detail.roleSelected = vm.detail.role_info.id;//------

          vm.loading = false;
        })
        .catch(error => {
          vm.loading = false;
        })
      },  
     fetchDeptRole() {
      let vm = this;
      vm.deptRoleLoading = true;
      getDeptRoleInfo(vm.detail.dept_info.id)
      .then(response => {
        let res = response.data;
        vm.roleList = res;
        vm.deptRoleLoading = false;
      })
      .catch(error => {
        vm.deptRoleLoading = false;
      })
     },
     fetchDept() {
      let vm = this;
      vm.deptLoading = true;
      getDeptInfo()
      .then(response => {
        let res = response.data;
        vm.deptList = res;

        vm.deptLoading = false;
      })
      .catch(error => {
        vm.deptLoading = false;
      })
     },
     clickRoleSelect() {
      this.fetchDeptRole();
     },
     handleDeptClick() {
      this.deptDialogVisible = true;
      this.fetchDept();
     },
     handleSaveClick(formName){
      if (this.type == 'add') {
        this.create(formName);
      } else if (this.type == 'update') {
        this.modify(formName);
      }
     },
     handleDeptSelect(key, keyPath) {
          // console.log(key);
      this.deptSelected = key;
     },
     handleDeptDlgClick() {
      // console.log("-------",this.deptSelected)
      let str = this.deptSelected.split('-');
      let deptInfo={
        "id":str[0],
        "name":str[1]
      } 
      //this.detail.dept_info["id"] = str[0];
      //this.detail.dept_info["name"] = str[1];
      this.detail.dept_info = deptInfo;
      this.detail.dept_info_name= str[1];//-----
      this.deptDialogVisible = false;
      // console.log(this.detail)
     },
     modify(formName) {
      let vm = this;
      let url="";
      if(vm.detail.avatar){
        let urlList=vm.detail.avatar.split("/");
        url=(urlList[urlList.length-1]);
      }
      vm.detail.avatar = url;
      //console.log(vm.detail);
      vm.$refs[formName].validate((valid) => {//验证
        if (valid) {
          vm.detail.role_id = vm.detail.roleSelected;
          vm.detail.dept_id = vm.detail.dept_info.id;
          modifyStaff(vm.id, vm.detail)
          .then(response => {
            vm.$message.success("执行成功！");
            vm.onBack();
          })
          .catch(error => {
            vm.$message.error("执行失败！"+error.response.data.error_msg);
          })
        } else {
          vm.$message.error("执行失败！");
          return false;
        }
      });
     },
     create(formName) {
      this.detail.role_id = this.detail.roleSelected;
      this.detail.dept_id = this.detail.dept_info.id;
      let vm = this;
      vm.$refs[formName].validate((valid) => {//验证
        if (valid) {
          createStaff(vm.detail)
          .then(response => {
            vm.$message.success("执行成功！");
            vm.onBack();
          })
          .catch(error => {
            vm.$message.error("执行失败！"+error.response.data.error_msg);
          })
        } else {
          vm.$message.error("执行失败！");
          return false;
        }
      });
     },
     onBack(){
      let vm=this;
      window.localStorage.setItem('pageNum',vm.$route.query.pageNum||1);
      vm.$router.go(-1);
     }

    }
  
  }


</script>



